<template>
  <div class="adminCtrl_box">
    <el-dialog
      title="修改用户信息"
      :visible.sync="dialogChange">
      <el-form v-model="selectedUser" style="text-align: left" ref="dataForm">
        <el-form-item label="用户名" label-width="120px" prop="username">
          <label>{{selectedUser.loginName}}</label>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="120px" prop="userName">
          <el-input v-model="selectedUser.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px" prop="userName">
          <el-input v-model="selectedUser.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建人" label-width="120px" prop="createName">
          <label>{{selectedUser.createName}}</label>
        </el-form-item>
        <el-form-item label="创建时间" label-width="120px" prop="createTime">
          <label>{{selectedUser.createTime | datefmt}}</label>
        </el-form-item>
        <el-form-item label="更改人" label-width="120px" prop="updateName">
          <label>{{selectedUser.updateName}}</label>
        </el-form-item>
        <el-form-item label="更改时间" label-width="120px" prop="updateTime">
          <label>{{selectedUser.updateTime| datefmt}}</label>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" prop="password">
          <el-button type="warning" @click="resetPassword(selectedUser.id)">重置密码</el-button>
        </el-form-item>
        <el-form-item label="角色分配" label-width="120px" prop="roles">
          <el-checkbox-group v-model="selectedRolesIds">
            <el-checkbox v-for="(role,i) in roles" :key="i" :label="role.id">{{role.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitChange(selectedUser)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="删除用户信息"
      :visible.sync="dialogDelete">
      <span>此操作会永久删除用户{{selectedUser.username}}，并且不可恢复</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitDelete(selectedUser)">确 定</el-button>
      </div>
    </el-dialog>
    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="users"
        style="width: 100%"
        :default-sort = "{prop: 'id', order: 'ascending'}"
      >
        <el-table-column
          type="selection"
          label=""
          width="70">
        </el-table-column>
        <el-table-column
          prop="loginName"
          label="用户名"
          width="130">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          width="130">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width=200>
        </el-table-column>
        <el-table-column
          prop="createName"
          label="创建人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width=110>
        </el-table-column>
        <el-table-column
          prop="updateName"
          label="修改人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          width="110">
        </el-table-column>
        <el-table-column
          label="操作"
          width="135"
        >
          <template v-slot:default="scope">
            <el-button
              @click="editUser(scope.row)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click="determine(scope.row)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0 20px 0;float: left">
        <el-button>取消选择</el-button>
        <el-button>批量删除</el-button>
      </div>
      <el-pagination
        background
        style="float:right;"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import api from '../../../apis/admin/user'
import {Message} from 'element-ui'
// eslint-disable-next-line standard/object-curly-even-spacing
import { dateFormat, dataCreatUpdateTimeFormat} from '@/util/dateFormat/dateFormat'
export default {
  name: 'AdminCtrl',
  data () {
    return {
      users: [],
      roles: [],
      userRoles: [],
      dialogChange: false,
      dialogDelete: false,
      selectedUser: [],
      selectedRolesIds: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      list: []
    }
  },
  mounted () {
    this.load()
    this.loadUserRoles()
    this.loadRoles()
  },
  methods: {
    dataCreatUpdateTimeFormat,
    dateFormat,
    async loadRoles () {
      const result = await api.loadRoles()
      this.roles = result.data
    },
    async loadUserRoles () {
      const result = await api.loadUserRoles()
      this.userRoles = result.data
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.load()
    },
    async load () {
      this.list = await api.loadUsers(this.currentPage, this.pageSize)
      this.total = this.list.data.total
      this.users = this.dataCreatUpdateTimeFormat(this.list.data.records)
    },
    setUserRole (user) {
      let Role = []
      for (let i = 0; i < this.userRoles.length; i++) {
        if (user.id === this.userRoles[i].userId) {
          Role[i] = this.userRoles[i].roleId
        }
      }
      user.roles = Role
      return user
    },
    async onSubmitDelete (user) {
      const result = await api.deleteUser(user)
      if (result.code === 200) {
        await this.loadUserRoles()
        await this.loadRoles()
        Message.success(result.msg)
      } else {
        Message.error(result.msg)
      }
      this.dialogDelete = false
    },
    async onSubmitChange (user) {
      let roles = []
      for (let i = 0; i < this.selectedRolesIds.length; i++) {
        for (let j = 0; j < this.roles.length; j++) {
          if (this.selectedRolesIds[i] === this.roles[j].id) {
            roles.push(this.roles[j])
          }
        }
      }
      const result = await api.updateUser(
        {
          id: user.id,
          loginName: user.loginName,
          userName: user.userName,
          password: user.password,
          isDelete: user.isDelete,
          roles: roles
        })
      if (result.code === 200) {
        await this.loadUserRoles()
        await this.loadRoles()
        Message.success('修改成功')
      } else {
        Message.error('修改失败')
      }
      this.dialogChange = false
    },
    editUser (user) {
      this.dialogChange = true
      this.selectedUser = user
      let roleIds = []
      const userB = this.setUserRole(user)
      for (let i = 0; i < userB.roles.length; i++) {
        roleIds.push(user.roles[i])
      }
      this.selectedRolesIds = userB.roles
    },
    determine (user) {
      this.dialogDelete = true
      this.selectedUser = user
    },
    async resetPassword (id) {
      const updateResult = await api.resetPassword(id)
      if (updateResult.code === 200) {
        this.dialogChange = false
        Message.success('密码已重置为123')
      } else {
        Message.error('密码重置失败')
      }
    }
  }
}
</script>

<style scoped>

</style>
